body {
	height: 100%;
	overflow: hidden;
	background-color: #FFF;
}

.my-flex {
	flex: 1;
}

.header {
	width: 100%;
	height: 45px;
	position: fixed;
}

.header-box {
	height: 45px;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	transition: top .6s;
	-moz-transition: top .6s;
	-webkit-transition: top .6s;
	-o-transition: top .6s;
	animation-timing-function: ease-out;
	-webkit-animation-timing-function: ease-out;
	-moz-animation-timing-function: ease-out;
	-o-animation-timing-function: ease-out;
}

.header-top-view {
	width: 100%;
	height: 140px;
	background-color: #2298D6;
	position: absolute;
	top: -140px;
	transition: top .6s;
	-moz-transition: top .6s;
	-webkit-transition: top .6s;
	-o-transition: top .6s;
	animation-timing-function: ease-out;
	-webkit-animation-timing-function: ease-out;
	-moz-animation-timing-function: ease-out;
	-o-animation-timing-function: ease-out;
}

.title-box {
	text-align: center;
	height: 45px;
	line-height: 44px;
}

.title-icon-box {
	padding: 10px 15px;
	opacity: 1;
	transition: opacity .6s;
	-webkit-transition: opacity .6s;
	-moz-transition: opacity .6s;
	-o-transition: opacity .6s;
	animation-timing-function: ease-out;
	-webkit-animation-timing-function: ease-out;
	-moz-animation-timing-function: ease-out;
	-o-animation-timing-function: ease-out;
}

.title-icon {
	max-width: 20px;
	max-height: 20px;
	/* 图标颜色是这个属性 */
	fill: #636163;
}

.title-box>label {
	text-align: center;
	border: 1px solid #B5B5B5;
	border-radius: 18px;
	font-size: 14px;
	line-height: 40px;
	transition: padding .6s;
	-moz-transition: padding .6s;
	-webkit-transition: padding .6s;
	-o-transition: padding .6s;
	animation-timing-function: ease-out;
	-webkit-animation-timing-function: ease-out;
	-moz-animation-timing-function: ease-out;
	-o-animation-timing-function: ease-out;
}

.label-title-box {
	color: #636163;
	padding: 3px 8px;
}

.query-icon {
	max-width: 20px;
	max-height: 18px;
	fill: #F00;
}

.main {
	position: absolute;
	top: 45px;
	bottom: 50px;
	left: 0;
	right: 0;
	overflow: hidden;
	transition: top .6s;
	-moz-transition: top .6s;
	-webkit-transition: top .6s;
	-o-transition: top .6s;
	animation-timing-function: ease-out;
	-webkit-animation-timing-function: ease-out;
	-moz-animation-timing-function: ease-out;
	-o-animation-timing-function: ease-out;
}

.pull-box {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: auto;
}

.content {
	position: absolute;
	top: 68px;
	bottom: 0;
	left: 0;
	right: 0;
	overflow: auto;
}

.content .item-line {
	margin-top: 2px;
	margin-bottom: 2px;
	height: 40px;
}

.item-line .line {
	width: 1px;
	background-color: #D6D3D6;
}

.item-header {
	margin-top: 10px;
	width: 100%;
	text-align: center;
}

.item-header .icon-box p:first-child {
	margin-top: 3px;
}

.item-header .icon-box p {
	line-height: 20px;
}

.item-header .icon {
	max-width: 40px;
	max-height: 40px;
}

.item-header .icon-box {
	padding: 3px;
	border: 1px solid #5279EF;
	background-color: #5279EF;
	border-radius: 50%;
	width: 49px;
	height: 49px;
	font-size: 10px;
	text-align: center;
	color: #FFF;
	display: flow-root;
}

.item-header .left {
	flex: 1;
	text-align: center;
	font-size: 14px;
	line-height: 1.3;
	margin-top: 10.5px;
	color: #636163;
}

.item-header .right {
	flex: 1;
	text-align: center;
	font-size: 14px;
	line-height: 1.3;
	margin-top: 10.5px;
	color: #636163;
}

.item-box .text-box {
	padding: 3px;
	border: 1px solid #D6D3D6;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	font-size: 13px;
	text-align: center;
	line-height: 22px;
	background-color: #D6D3D6;
	color: #fff;
}

.item-box .icon-box {
	padding: 3px;
	border: 1px solid #D6D3D6;
	border-radius: 50%;
	width: 24px;
	height: 24px;
	background-color: #D6D3D6;
}

.item-box .left label {
	font-size: 15px;
	float: right;
	line-height: 32px;
	margin-right: 2px;
	color: #636163;
}

.item-box .left .month-text {
	font-size: 13px;
	line-height: 9px;
	margin: 0;
}

.item-box .month-box {
	padding: 3px;
	border: 1px solid #D6D3D6;
	border-radius: 50%;
	width: 1px;
	height: 1px;
	background-color: #EFEFEF;
}

.item-box .left label:first-child {
	margin-right: 12px;
}

.item-box .right label {
	font-size: 15px;
	line-height: 32px;
	margin-left: 2px;
	color: #636163;
}

.item-box .right label:first-child {
	margin-left: 12px;
}

.item-box .icon-box .icon {
	max-width: 24px;
	max-height: 24px;
}

.item-box .icon {
	max-width: 40px;
	max-height: 40px;
}

.item-box .item-btn-delete {
	margin-left: 18px;
	padding: 7px;
	/*border: 1px solid #DE5D4A;*/
	border-radius: 50%;
	width: 16px;
	height: 16px;
	background-color: #DE5D4A;
	line-height: 16px;
	opacity: 1;
	transition: All .2s ease-out;
	-webkit-transition: All .2s ease-in-out;
	-moz-transition: All .2s ease-in-out;
	-o-transition: All .2s ease-in-out;
}

.item-box .item-btn-delete.action {
	opacity: 0;
	transform: translate(400%, 0) rotate(360deg) scale(0.6);
	-webkit-transform: translate(400%, 0) rotate(360deg) scale(0.6);
	-moz-transform: translate(400%, 0) rotate(360deg) scale(0.6);
	-o-transform: translate(400%, 0) rotate(360deg) scale(0.6);
	-ms-transform: translate(400%, 0) rotate(360deg) scale(0.6);
}

.item-box .item-btn-delete .icon {
	max-width: 16px;
	max-height: 16px;
	fill: #FFFFFF;
}

.item-box .item-btn-edit {
	margin-right: 18px;
	padding: 7px;
	border-radius: 50%;
	width: 16px;
	height: 16px;
	line-height: 16px;
	background-color: #A5BAFF;
	opacity: 1;
	transition: All .2s ease-out;
	-webkit-transition: All .2s ease-in-out;
	-moz-transition: All .2s ease-in-out;
	-o-transition: All .2s ease-in-out;
}

.item-box .item-btn-edit.action {
	opacity: 0;
	transform: translate(-400%, 0) rotate(-360deg) scale(0.6);
	-webkit-transform: translate(-400%, 0) rotate(-360deg) scale(0.6);
	-moz-transform: translate(-400%, 0) rotate(-360deg) scale(0.6);
	-o-transform: translate(-400%, 0) rotate(-360deg) scale(0.6);
	-ms-transform: translate(-400%, 0) rotate(-360deg) scale(0.6);
}

.item-box .item-btn-edit .icon {
	max-width: 16px;
	max-height: 16px;
	fill: #FFFFFF;
}

.item-bottom {
	text-align: center;
	margin-top: 24px;
	font-size: 15px;
	margin-bottom: 5px;
}

.item-bottom div {
	width: 100%;
}

.bar-bottom {
	text-align: center;
	position: fixed;
	height: 50px;
	bottom: 0;
	left: 0;
	right: 0;
	border-top: 1px solid #D6D3D6;
	box-sizing: border-box;
}

.bar-bottom .bar-icon {
	max-width: 26px;
	max-height: 26px;
	padding: 2px;
	fill: #636163;
}

.bar-bottom .bar-box-home {
	height: 49px;
	line-height: 49px;
}

.bar-bottom .bar-box-home .bar-icon {
	max-width: 41px;
	max-height: 41px;
	padding: 2px;
	fill: #5279EF;
}

.bar-bottom .bar-box-item {
	text-align: center;
	display: inline-block;
	height: 49px;
	line-height: 49px;
}

.bar-bottom .bar-box-item .bar-box {
	max-width: 30px;
	max-height: 30px;
}

.bar-bottom .bar-box-item.action .bar-text {
	color: #5279EF;
}

.bar-bottom .bar-box-item.action .bar-box .bar-icon {
	fill: #5279EF;
}

.bar-bottom .bar-box-item .bar-icon {
	fill: #636363;
}

.bar-bottom .bar-box-item .bar-text {
	font-size: 14px;
	height: 19px;
	line-height: 10px;
	color: #636363;
	font-weight: 100;
}

#title-name {
	opacity: 1;
	transition: opacity .3s;
	-webkit-transition: opacity .3s;
	-moz-transition: opacity .3s;
	-o-transition: opacity .3s;
	animation-timing-function: ease-out;
	-webkit-animation-timing-function: ease-out;
	-moz-animation-timing-function: ease-out;
	-o-animation-timing-function: ease-out;
}
.weui-dialog__btn{
	color:#5279EF;
}